<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浏览器渲染机制</title>
</head>
<body>
	<p>
		渲染机制------js运行机制------页面性能------错误监控
	</p>
	<p>
		1. 什么是doctype及作用
		2. 浏览器渲染过程
		3. 重排reflow
		4. 重绘repaint
		5. 布局layout
	</p>
	doctype 是来声明dtd(document type definition, 文档类型定义)，dtd的作用是告诉浏览器自己是什么类型，用何种协议来解析，
	以及切换浏览器模式
	<hr>

	提升页面性能的方法有哪些
		1.资源的合并压缩，减少http请求（js, css）
		2.非核心代码异步加载（1.动态创建script 标签，创建脚本加载 2.defer 关键字， async 关键字
					--（defer异步是在HTML解析完成之后才按加载顺序执行， async 关键字不能确保script加载的顺序）
		3. 利用浏览器缓存
				分为强缓存 和 协商缓存
					强缓存：NGINX设置expires过期时间字段，（绝对时间），在这日期之前均不再去新的请求
								 cache-control: cache-control max-age=3600
					协商缓存：如果强缓存时间过期，就是协商缓存，有last-modified, if-modified-since字段
		4. 使用cdn(content delivery network)
		5. 预解析dns (dns解析会耗费20-120ms,对页面中出现的域名或者没有出现的域名进行预解析)
				<meta http-equiv="x-dns-prefetch-control" content="on">
				<link rel="dns-prefetch" href="//www.zhix.net">
				<link rel="dns-prefetch" href="//api.share.zhix.net">
				<link rel="dns-prefetch" href="//bdimg.share.zhix.net">
</body>
</html>